
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
		<title>Message from {shop_name}</title>
		

		<style>
			/****** responsive ********/
			@media only screen and (max-width: 300px){ 
				body {
					width:218px !important;
					margin:auto !important;
				}
				.table {width:195px !important;margin:auto !important;}
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto !important;display: block !important;}		
				span.title{font-size:20px !important;line-height: 23px !important}
				span.subtitle{font-size: 14px !important;line-height: 18px !important;padding-top:10px !important;display:block !important;}		
				td.box p{font-size: 12px !important;font-weight: bold !important;}
				.table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr { 
					display: block !important; 
				}
				.table-recap{width: 200px!important;}
				.table-recap tr td, .conf_body td{text-align:center !important;}	
				.address{display: block !important;margin-bottom: 10px !important;}
				.space_address{display: none !important;}	
			} 
							
			@media only screen and (min-width: 301px) and (max-width: 500px) { 
				body {width:308px!important;margin:auto!important;}
				.table {width:285px!important;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}	
				.table-recap table, .table-recap thead, .table-recap tbody, .table-recap th, .table-recap td, .table-recap tr { 
					display: block !important; 
				}
				.table-recap{width: 293px !important;}
				.table-recap tr td, .conf_body td{text-align:center !important;}
				
			} 

			@media only screen and (min-width: 501px) and (max-width: 768px) {
				body {width:478px!important;margin:auto!important;}
				.table {width:450px!important;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}			
			}

						
			/* Mobile */

			@media only screen and (max-device-width: 480px) { 
				body {width:308px!important;margin:auto!important;}
				.table {width:285px;margin:auto!important;}	
				.logo, .titleblock, .linkbelow, .box, .footer, .space_footer{width:auto!important;display: block!important;}
				
				.table-recap{width: 285px!important;}
				.table-recap tr td, .conf_body td{text-align:center!important;}	
				.address{display: block !important;margin-bottom: 10px !important;}
				.space_address{display: none !important;}	
			} 
		</style>

	</head>
	<body style="background-color:#fff;width:650px;font-family:Open-sans, sans-serif;color:#555454;font-size:13px;line-height:18px;margin:auto">
		<table class="table table-mail" style="width:100%;margin-top:10px;-moz-box-shadow:0 0 5px #afafaf;-webkit-box-shadow:0 0 5px #afafaf;-o-box-shadow:0 0 5px #afafaf;box-shadow:0 0 5px #afafaf;filter:progid:DXImageTransform.Microsoft.Shadow(color=#afafaf,Direction=134,Strength=5)">
			<tr>
				<td class="space" style="width:20px;border:none;padding:7px 0">&nbsp;</td>
				<td align="center" style="border:none;padding:7px 0">
					<table class="table" style="width:100%;background-color:#fff">
						<tr>
							<td align="center" class="logo" style="border-bottom:4px solid #333!important;border:none;padding:7px 0">
								<a title="{shop_name}" href="{shop_url}" style="color:#337ff1">
									<img src="{shop_logo}" alt="{shop_name}" />
								</a>
							</td>
						</tr>

<tr>
	<td align="center" class="titleblock" style="border:none;padding:7px 0">
		<span class="title" style="font-weight:500;font-size:28px;text-transform:uppercase;line-height:33px">Important !! Your shop Get New <br>
		UNPAID Online Order: #{order_id}</span>
	</td>
</tr>
<tr>
	<td class="linkbelow" style="border:none;padding:7px 0">
		<span>A new order was placed  from the following customer: {firstname} {lastname} ({email})<br>
		Please following the instructions and prepare the order(s) for the customer to pickup:<br>
		<br>
		</span>
        <div style="width:100%; border:#C66 solid 2px; font-weight:bold;">
          <ol>
            <li>
              Search the product(s) listed in the order details.
              </li>
            <li>If you can fullfill the order, please go to your company info page and click "Order Ready" button in online order management page.
              </li>
            <li>Please print out this email and wrapped on the products you have find.
              </li>
            <li>If you can not find enough quantity for some of the products, please ask other shops in same shopping center for help.
              </li>
            <li>If you tried all you possible solutions and can not get the products ready, please go to your company info page and click "Can Not Find Product(s)" button in online order management page</li>
            <li>regardless you can or can not get the order ready, please click buttons in the online order mangement page within 2 Hours (exclude shop close time)</li>
          </ol><br>

        </div>
	</td>
</tr>
<tr>
	<td align="center" class="space_footer" style="padding:0!important;border:none"><span class="title" style="font-weight:500;font-size:28px;text-transform:uppercase;line-height:33px">Please MUSt response customer <span style="color:#C33">with in 2 hours</span> in Company info page</span></td>
</tr>
<tr>
	<td class="box" colspan="3" style="background-color:#fbfbfb;border:1px solid #d6d4d4!important;padding:10px!important">
		<p style="margin:3px 0 7px;text-transform:uppercase;font-weight:500;font-size:18px;border-bottom:1px solid #d6d4d4!important;padding-bottom:10px">
			Order details		</p>
		<p style="color:#777">
		  <span style="color:#333"><strong>Order[#{order_id}]:</strong></span> {order_name} Placed on {date}<br /><br />
		  <span style="color:#333"><strong>Payment:</strong></span> {payment}
		  </p>
		<p style="color:#777"><span class="title" style="font-weight:500;font-size:28px;text-transform:uppercase;line-height:33px">Order Has NOT been Paid YET</span></p></td>
</tr>
<tr>
	<td style="border:none;padding:7px 0">
		<table class="table table-recap" bgcolor="#ffffff" style="width:100%;background-color:#fff"><!-- Title -->
			<thead>
				<tr>
					<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Reference</th>
					<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Product</th>
					<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Unit price</th>
					<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Quantity</th>
					<th style="border:1px solid #DDD!important;background-color:#fbfbfb;font-family:Arial;color:#333;font-size:13px;padding:10px">Total price</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td colspan="5" style="color:#777;padding:10px!important;border:1px solid #DDD!important">
						{items}
					</td>
				</tr>
				<tr class="conf_body">
					<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Products</strong></td>
					<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_products}</td>
				</tr>
				<tr class="conf_body">
					<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Discounts</strong></td>
					<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_discounts}</td>
				</tr>
				<tr class="conf_body">
					<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Gift-wrapping</strong></td>
					<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_wrapping}</td>
				</tr>
				<tr class="conf_body">
					<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Shipping</strong></td>
					<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_shipping}</td>
				</tr>
				<tr class="conf_body">
					<td bgcolor="#fbfbfb" align="right" colspan="4" style="color:#333;padding:10px!important;border:1px solid #DDD!important"><strong>Total Tax paid</strong></td>
					<td bgcolor="#fbfbfb" align="right" style="color:#333;padding:10px!important;border:1px solid #DDD!important">{total_tax_paid}</td>
				</tr>
				<tr class="conf_body">
					<td bgcolor="#fbfbfb" align="right" colspan="4" class="total" style="color:#555454;padding:10px!important;border:1px solid #DDD!important;font-size:18px;font-weight:500;font-family:Open-sans, sans-serif"><strong>Total paid</strong></td>
					<td bgcolor="#fbfbfb" align="right" class="total_amount" style="color:#333;padding:10px!important;border:1px solid #DDD!important;font-size:21px;font-weight:500;font-family:Open-sans, sans-serif">{total_paid}</td>
				</tr>
			</tbody>
		</table>
	</td>
</tr>
<tr>
	<td class="box" colspan="3" style="background-color:#fbfbfb;border:1px solid #d6d4d4!important;padding:10px!important">
		<p style="margin:3px 0 7px;text-transform:uppercase;font-weight:500;font-size:18px;border-bottom:1px solid #d6d4d4!important;padding-bottom:10px">
			Carrier:		</p>
		<span style="color:#777">
			{carrier}
		</span>
	</td>
</tr>
<tr>
	<td class="space_footer" style="padding:0!important;border:none">&nbsp;</td>
</tr>
<tr>
	<td style="border:none;padding:7px 0">
		<table class="table" style="width:100%;background-color:#fff">
			<tr>
				<td class="box address" width="310" style="background-color:#fbfbfb;border:1px solid #d6d4d4!important;padding:10px!important">
					<p style="margin:3px 0 7px;text-transform:uppercase;font-weight:500;font-size:18px;border-bottom:1px solid #d6d4d4!important;padding-bottom:10px">
						Delivery address					</p>
					<span style="color:#777">
						{delivery_block_html}
					</span>
				</td>
				<td width="20" class="space_address" style="border:none;padding:7px 0">&nbsp;</td>
				<td class="box address" width="310" style="background-color:#fbfbfb;border:1px solid #d6d4d4!important;padding:10px!important">
					<p style="margin:3px 0 7px;text-transform:uppercase;font-weight:500;font-size:18px;border-bottom:1px solid #d6d4d4!important;padding-bottom:10px">
						Billing address					</p>
					<span style="color:#777">
						{invoice_block_html}
					</span>
				</td>
			</tr>
		</table>
	</td>
</tr>
<tr>
	<td class="space_footer" style="padding:0!important;border:none">&nbsp;</td>
</tr>
<tr>
	<td class="box" colspan="3" style="background-color:#fbfbfb;border:1px solid #d6d4d4!important;padding:10px!important">
		<p style="margin:3px 0 7px;text-transform:uppercase;font-weight:500;font-size:18px;border-bottom:1px solid #d6d4d4!important;padding-bottom:10px">
			Customer message:		</p>
		<span style="color:#777">
			{message}
		</span>
	</td>
</tr>

						<tr>
							<td class="space_footer" style="padding:0!important;border:none">&nbsp;</td>
						</tr>
						<tr>
							<td class="footer" style="border-top:4px solid #333!important;border:none;padding:7px 0">
					          <p><br>
				            <span class="title" style="font-weight:500;font-size:28px;text-transform:uppercase;line-height:33px">Order <strong>#{order_id} </strong>Has NOT been Paid YET.</span></p>
			              <p><span class="title" style="font-weight:500;font-size:28px;text-transform:uppercase;line-height:33px">You MUST COLLECT PAYMENT FROM CUSTOMER UPON PICKUP</span></p></td>
						</tr>
					</table>
				</td>
				<td class="space" style="width:20px;border:none;padding:7px 0">&nbsp;</td>
			</tr>
		</table>
	</body>
</html>